<template>
<!-- 权限列表 -->
  <div>
    <!-- 面包屑开始 -->
    <BreadCrumb level1="权限管理" level2="权限列表"></BreadCrumb>
    <!-- 面包屑结束 -->

    <!-- 权限列表的开始 -->
    <el-card style="margin-top:20px;">
      <!-- 表格的开始 -->
      <div class="table">
        <el-table border :data="powerList">
          <el-table-column label="#" type="index" width="50" align="center"></el-table-column>
          <el-table-column label="权限名称" prop="authName"></el-table-column>
          <el-table-column label="路径" prop="path"></el-table-column>
          <el-table-column label="权限等级">
            <template slot-scope="scope">
              <el-tag :type="grade[scope.row.level]">{{scope.row.level|rights}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 表格的结束 -->
    </el-card>
  </div>
</template>

<script>
import { getPowerList } from "@/http/api";
export default {
  data() {
    return {
      powerList: [], //所有的角色的数据
      grade:["default","success","danger"],//等级颜色
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //   获取所有的数据
    async getList() {
      const res = await getPowerList();
      // console.log(res.result);
      this.powerList = res.result;
    },
  },
};
</script>

<style lang="scss" scoped>
.table {
  margin-top: 20px;
}
</style>
